<script setup>
import Demo10Component05Children01 from './demo10-component05-children01.vue';
import Demo10Component05Children02 from './demo10-component05-children02.vue';
import Demo10Component05Children03 from './demo10-component05-children03.vue';
</script>
<template>
<h2>demo10-component05.vue</h2>
  <zhtt-card title=":is 操作动态组件">
    type：{{type}}
    <component :is="type"></component>
    <button class="zhtt-btn" @click="changeComponent(1)">组件1</button>
    <button class="zhtt-btn" @click="changeComponent(2)">组件2</button>
    <button class="zhtt-btn" @click="changeComponent(3)">组件3</button>
  </zhtt-card>
  <zhtt-card title="失活的组件将会被缓存">
    &lt;keep-alive&gt;<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;component :is=&quot;currentTabComponent&quot;&gt;&lt;/component&gt;<br/>
    &lt;/keep-alive&gt;<br/>
  </zhtt-card>
</template>

<script>
export default {
  data(){
    return {
      type:'Demo10Component05Children01'
    }
  },
  components:{ // 局部注册
    Demo10Component05Children01,
    Demo10Component05Children02,
    'demo10-component05-children03':Demo10Component05Children03
  },
  methods:{
    changeComponent(index){
      if(index===3){
        this.type = `demo10-component05-children0${index}`;
        return;
      }
      this.type = `Demo10Component05Children0${index}`;
    }
  }
}
</script>
